import 'dart:io';
import 'package:extended_tabs/extended_tabs.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:visibility_detector/visibility_detector.dart';
import 'package:ball_lion/module/home/home_logic.dart';
import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/resources/styles.dart';
import 'package:ball_lion/widgets/base/wqs_indicator.dart';
import 'package:ball_lion/widgets/base/wqs_text.dart';
import 'package:ball_lion/widgets/gif.dart';
import 'package:ball_lion/widgets/loading/loading_widget.dart';
import 'package:ball_lion/utils/utils.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with AutomaticKeepAliveClientMixin {
  final HomeLogic logic = Get.put(HomeLogic());

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return GetBuilder<HomeLogic>(builder: (logic) {
      return AnnotatedRegion<SystemUiOverlayStyle>(
        value: const SystemUiOverlayStyle(
            statusBarBrightness: Brightness.dark,
            statusBarIconBrightness: Brightness.dark),
        child: Scaffold(
          extendBodyBehindAppBar: true,
          body: VisibilityDetector(
            key: const Key("home"),
            onVisibilityChanged: (VisibilityInfo info) {
              if (!info.visibleBounds.isEmpty) {
                logic.getMsgCount();
                logic.getLive();
              }
            },
            child: Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                    colors: [Colours.white, Colours.greyF2F3F7],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter),
              ),
              child: LoadingWidget<bool>(
                isLoading: logic.pages.noValue,
                loading: Container(),
                data: false,
                reconnect: logic.getRefresh,
                child: () => Stack(
                  alignment: Alignment.topCenter,
                  children: [
                    Image.asset(
                        Utils.getImgPath(logic.highlightRed
                            ? "nav_bar_bg_red.png"
                            : "nav_bar_bg.png"),
                        fit: BoxFit.cover,
                        width: Get.width,
                        height: 88),
                    Column(
                      children: [
                        Container(
                          padding: EdgeInsets.only(top: 44),
                          child: SizedBox(
                            height: 44,
                            child: Styles.tabbar(
                                scrollable: true,
                                labelColor: logic.highlightRed
                                    ? Colours.N1
                                    : Colours.N9,
                                unselectedLabelColor: logic.highlightRed
                                    ? Colours.N2
                                    : Colours.N8,
                                fontSize: 17,
                                fontWeight: FontWeight.w600,
                                unselectedFontWeight: FontWeight.w400,
                                indicator: QsIndicator(
                                    borderSide: BorderSide(
                                        color: (logic.highlightRed
                                            ? Colours.N1
                                            : Colours.B5),
                                        width: 3),
                                    indicatorWidth: 10,
                                    indicatorHeight: 4,
                                    indicatorBottom: 6),
                                controller: logic.tabController,
                                onTap: (value) {
                                  logic.index = value;
                                  Utils.onEvent('home_channel', params: {
                                    'home_channel': logic.classes![value].name
                                  });
                                },
                                labelPadding: EdgeInsets.only(
                                    top: 10,
                                    left: 10,
                                    right: 10,
                                    bottom: Platform.isIOS ? 6 : 2),
                                tabs: logic.classes!.map((e) {
                                  if (e.id == "app_live" && logic.hasLive) {
                                    return Row(
                                      children: [
                                        QsText(e.name ?? ""),
                                        const GifWidget(
                                            width: 16,
                                            height: 16,
                                            asset: 'in_live_48.gif',
                                            duration:
                                                Duration(milliseconds: 500))
                                      ],
                                    );
                                  } else {
                                    return QsText(e.name ?? "");
                                  }
                                }).toList()),
                          ),
                        ),
                        const Divider(color: Colours.N3, height: 0.5),
                        Expanded(
                          child: ExtendedTabBarView(
                            controller: logic.tabController,
                            children: logic.pages,
                          ),
                        )
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      );
    });
  }

  @override
  bool get wantKeepAlive => true;
}
